
<template>
  <div v-drag class="quick-flow">
    <!-- :style="{ transform: `translate(${x}px,${y}px) scale(${scale})` }" -->
    <svg style="height: 100%; width: 100%" class="quick-canvas" :style="getStyle()">
      <pattern id="pattern-vue-flow-0" :x="x" :y="y" width="32" height="32" patternUnits="userSpaceOnUse"
        :patternTransform="`translate(${x},${y}) scale(${scale})`">
        <circle cx="2" cy="2" r="2" fill="#409eff"></circle>
      </pattern>
      <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-vue-flow-0)"></rect>
    </svg>
    <div @click="cavasClick" class="container" :style="{ transform: `translate(${x}px,${y}px) scale(${scale})` }"
      @mousewheel="handleMousewhell">
      <div class="node-list">
        <svg width="100%" class="line" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <flow-line v-for="(item, index) in lines" :key="index" :item="item" :active="item.id === currentNode.id"
            @lineClick="handleLineClick"></flow-line>
        </svg>
        <template v-for="(item, index) in nodes">
          <flow-node :key="index" :item="item"  :isLine="isLine"  :currentNode="currentNode" @pointClick="handlePointClick"
            @nodeClick="handleNodeClick" @nodeDelete="handleNodeDelete" @createLine="createLine"
            @nodeMove="handleNodeMove"></flow-node>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import flowNode from "./FlowNode";
import flowLine from "./FlowLine";
export default {
  name: "QuickFlow",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    currentNode:{
      type: Object,
      default: () => {},
    }
  },
  components: {
    flowNode,
    flowLine,
  },
  directives: {
    drag: {
      inserted(el, binding, vnode) {
        const self = vnode.context
        const odiv = el;
        odiv.onmousedown = (e) => {
          self.isDrag = true
          const disX = e.clientX
          const disY = e.clientY
          const oldX = self.x
          const oldY = self.y
          document.onmousemove = (e1) => {
            self.isDrag = true
            const left = e1.clientX - disX;
            const top = e1.clientY - disY;
            self.x = left + oldX;
            self.y = top + oldY;
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },
    },
  },
  watch: {
    data: {
      handler(val) {
        const { nodes, lines } = val;
        this.nodes = nodes;
        this.lines = lines;
      },
      deep: true,
    },
  },
  data() {
    return {
      isLine:false,
      isDrag: true,
      scale: 1,
      x: 0,
      y: 0,
      nodes: [],
      lines: [],
    };
  },
  methods: {
    getStyle() {
      if (this.isDrag) {
        return 'pointer-events: all'
      } else {
        return 'pointer-events: none'
      }
    },
    handlePointClick(isLine) {
      this.isLine = isLine
    },
    handleNodeMove(item) {
      this.$emit("nodeMove", item);
    },
    handleLineClick(item) {
      this.$emit("lineClick", item);
    },
    handleNodeClick(item) {
      this.isDrag = false
      this.$emit("nodeClick", item);
    },
    handleNodeDelete(item) {
      this.$emit("nodeDelete", item);
    },
    createLine(item) {
      this.$emit("createLine", item);
    },
    handleMousewhell(e) {
      console.log("handleMousewhell", e.wheelDelta);
      if (e.wheelDelta > 0) {
        if (this.scale < 10) {
          this.scale = this.scale + 0.1;
          console.log("this.scale+", this.scale);
        }
      } else {
        if (this.scale > 0) {
          this.scale = this.scale - 0.1;
          console.log("this.scale-", this.scale);
        }
      }
    },
    cavasClick() {
      this.$emit("clearCurrentNode");
    },
  },
};
</script>

<style lang="scss">
@keyframes dashdraw {
  0% {
    stroke-dashoffset: 10;
  }
}

.quick-flow {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: grab;
  pointer-events: all;
  visibility: visible;
  // z-index: 1;

  .container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

    .node-list {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;

      .line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
